<template>
  <div class="axial-fan">
    <!-- 1、搜索区域 -->
    <div class="header">
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="exportTable">导出表格</el-button>
    </div>
    <!-- 2、表格区域展示视图数据 -->
    <div class="wrapper">
      <el-table :data="fans" border ref="multipleTable" @row-click="handleRowClick" :row-key="getRowKey"
        @selection-change="handleSelectionChange" stripe style="width: 100%">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column v-for="column in columns" :key="column.key" :prop="column.key" :label="column.title" show-overflow-tooltip width="150px" :render-header="renderHeader"></el-table-column>
        <el-table-column label="操作" width="200" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection(fans)">全选</el-button>
      <el-button @click="toggleSelection()">反选</el-button>
    </div>
    <!-- 设备信息弹窗 -->
    <el-dialog title="设备信息" :visible.sync="showDeviceInfoModal" width="30%" :before-close="handleClose">
      <el-table :data="getDeviceInfoArray()" border>
        <el-table-column prop="title" label="属性"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeviceInfoModal = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 3、分页 -->
    <MyPagination :total="total" :pageSize="pageSize * 1" :currentPage="currentPage" @changePageNum="getPageNum"
      @changePageSize="changePageSize" />
  </div>
</template>

<script>
import MyPagination from '@/components/MyPagination.vue'
import { export2Excel } from '@/common/js/util'
import { getAxialFanList } from '@/api/index.js'

export default {
  components: {
    MyPagination
  },
  data() {
    return {
      showDeviceInfoModal: false,
      deviceInfo: {},
      multipleSelection: [], //被勾选的数据
      keyword: "",
      fans: [],
      total: 0,
      pageSize: 10,  // 一般默认值设为1
      currentPage: 1,  //当前页，让哪一页高亮
      type: 1,  //1：查询所有商品列表的分页   2：查询搜索列表的分页
      title: '轴流风扇编辑',   //弹窗标题
      rowData: {},  // 整行数据
      columns: [
        { title: '装置', key: 'device' },
        { title: '设备号', key: 'equipment_number' },
        { title: '资产号', key: 'asset_number' },
        { title: '位号', key: 'tag_number' },
        { title: '名称', key: 'name' },
        { title: '型号', key: 'model' },
        { title: '数量(台)', key: 'quantity_units' },
        { title: '单重(kg)', key: 'weight_kg' },
        { title: '最大维修重量(kg)', key: 'max_maintenance_weight_kg' },
        { title: '型式', key: 'type' },
        { title: '风机直径MM', key: 'fan_diameter_mm' },
        { title: '工艺介质', key: 'process_medium' },
        { title: '入口温度(℃)', key: 'inlet_temperature_c' },
        { title: '风量(Nm3/h)', key: 'air_flow_rate_nm3h' },
        { title: '转速(R/MIN)', key: 'rotation_speed_rmin' },
        { title: '轴功率kW', key: 'shaft_power_kw' },
        { title: '效率%', key: 'efficiency_percent' },
        { title: '风压(MPA)', key: 'wind_pressure_mpa' },
        { title: '轴封形式', key: 'shaft_seal_type' },
        { title: '止推轴承形式', key: 'thrust_bearing_type' },
        { title: '止推轴承装机数量', key: 'number_thrust_bearings_installed' },
        { title: '径向轴承形式', key: 'radial_bearing_type' },
        { title: '径向轴承装机数量', key: 'number_radial_bearings_installed' },
        { title: '轴承润滑方式', key: 'bearing_lubrication_method' },
        { title: '润滑油品', key: 'lubricant' },
        { title: '联轴器型式', key: 'coupling_type' },
        { title: '传动机构（类型）', key: 'transmission_mechanism_type' },
        { title: '传动机构（规格）', key: 'transmission_mechanism_specification' },
        { title: '叶片（叶片安装角度°）', key: 'blade_installation_angle_degrees' },
        { title: '叶片（叶片材质）', key: 'blade_material' },
        { title: '叶片（叶片型式）', key: 'blade_type' },
        { title: '叶片（直径mm）', key: 'blade_diameter_mm' },
        { title: '叶片（叶片数）', key: 'number_blades' },
        { title: '轴材质', key: 'shaft_material' },
        { title: '图号', key: 'drawing_number' },
        { title: '出厂编号', key: 'factory_number' },
        { title: '制造厂', key: 'manufacturer' },
        { title: '出厂年月', key: 'manufacturing_date' },
        { title: '驱动形式', key: 'driving_mode' },
        { title: '变速型式', key: 'speed_change_type' },
        { title: '安装单位', key: 'installation_unit' },
        { title: '电机（型号）', key: 'motor_model' },
        { title: '电机（功率KW）', key: 'motor_power_kw' },
        { title: '电机（转速rpm）', key: 'motor_speed_rpm' },
        { title: '电机（型号）', key: 'motor_type' },
        { title: '电机（电压V）', key: 'motor_voltage_v' },
        { title: '电机（制造厂）', key: 'motor_manufacturer' },
        { title: '电机（出厂年月）', key: 'motor_manufacturing_date' },
        { title: '简图（嵌入）', key: 'diagram_embedded' },
        { title: '设备分级', key: 'equipment_classification' },
        { title: '备注', key: 'remarks' }
      ],
      pageSizes: [10, 20, 50, 100, 500, 1000], // 可选的每页显示条数
      searchWords: {
        device: '',
        equipment_number: '',
        asset_number: '',
        tag_number: '',
        name: '',
        model: '',
        quantity_units: '',
        weight_kg: '',
        max_maintenance_weight_kg: '',
        type: '',
        fan_diameter_mm: '',
        process_medium: '',
        inlet_temperature_c: '',
        air_flow_rate_nm3h: '',
        rotation_speed_rmin: '',
        shaft_power_kw: '',
        efficiency_percent: '',
        wind_pressure_mpa: '',
        shaft_seal_type: '',
        thrust_bearing_type: '',
        number_thrust_bearings_installed: '',
        radial_bearing_type: '',
        number_radial_bearings_installed: '',
        bearing_lubrication_method: '',
        lubricant: '',
        coupling_type: '',
        transmission_mechanism_type: '',
        transmission_mechanism_specification: '',
        blade_installation_angle_degrees: '',
        blade_material: '',
        blade_type: '',
        blade_diameter_mm: '',
        number_blades: '',
        shaft_material: '',
        drawing_number: '',
        factory_number: '',
        manufacturer: '',
        manufacturing_date: '',
        driving_mode: '',
        speed_change_type: '',
        installation_unit: '',
        motor_model: '',
        motor_power_kw: '',
        motor_speed_rpm: '',
        motor_type: '',
        motor_voltage_v: '',
        motor_manufacturer: '',
        motor_manufacturing_date: '',
        diagram_embedded: '',
        equipment_classification: '',
        remarks: ''
      }
    }
  },
  // 生命周期函数
  created() {
    this.getAxialFanList(1) //调用
  },
  watch: {
    $route: function() {
      this.getAxialFanList(1)
    }
  },
  methods: {
    getDeviceInfoArray() {
      return Object.entries(this.deviceInfo).map(([key, value]) => ({
        title: this.getColumnTitle(key),
        value: value
      }));
    },
    handleRowClick(row, event, column) {
      if (column.label !== '操作' && (column.label === '设备号')) {
        this.handleShow(row, event, column);
      }
    },
    getColumnTitle(key) {
      const column = this.columns.find(col => col.key === key);
      return column ? column.title : key;
    },
    //切换分页后，还保持全选状态
    getRowKey(row) {
      return row.id;
    },
    // 根据页码查询轴流风扇列表
    async getAxialFanList(pageNum) {
      try {
        const params = { page: pageNum, pageSize: this.pageSize, searchWords: this.searchWords };
        const res = await getAxialFanList(params);
        this.fans = res.data;
        this.total = res.total;
      } catch (error) {
        console.log(error)
      }
    },
    async search() {
      this.getAxialFanList(1);
    },
    // 父组件接收 分页子组件传过来的页码
    getPageNum(page) {
      this.currentPage = page;  //点击页码，让当前页码高亮
      if (this.type == 1) {
        this.getAxialFanList(page);  // 查询所有商品分页
      } else {
        // 搜索分页 ，切割数据  0,1,2  3,4,5  6,7,8   slice(,)  0,3  3,6  6,9
        // ((page-1)*3,page*3)
        this.fans = this.searchList.slice((page - 1) * 3, page * 3);  //搜索完记得让type标记变为为2
      }
    },
    // 编辑
    handleEdit(index, row) {
      console.log('hell', index, row);
      this.$refs.dialog.dialogVisible = true; //显示弹窗
      this.title = "轴流风扇编辑";
      this.rowData = { ...row }; //{...row}：对象解构，用来每次都创建一个新对象
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //全选和反选（对当前页数据）
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    exportTable() {
      export2Excel(this.columns, this.fans, '轴流风扇列表')
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getAxialFanList(this.currentPage);
    },
    handleClose(done) {
      this.showDeviceInfoModal = false;
      done();
    },
    handleShow(row) {
      this.deviceInfo = row;
      this.showDeviceInfoModal = true;
      console.log('showDeviceInfoModal:', this.showDeviceInfoModal);
    },
    renderHeader(createElement, {column}) {
      return createElement('div', [
        createElement('div', {domProps: {innerHTML: column.label}}),
        createElement('el-input', {
          props: {
            value: this.searchWords[column.property]
          },
          on: {
            change: (val) => {
              this.searchWords[column.property] = val;
            }
          }
        })
      ])
    }
  }
}
</script>

<style scoped>
.axial-fan {
  padding: 20px;

  .header {
    display: flex; //弹性布局
    justify-content: flex-end;

    button {
      margin-left: 20px;
    }
  }

  .wrapper {
    padding: 20px 0;
    overflow-x: auto;
    /* 添加横向滚动条 */
  }
  .underline-column .cell {
    text-decoration: underline !important;
  }
}
</style>